<template>
	<view class="depositDetailPage-container1033">
		<view class="top-tip">温馨提示: 订单结束后，客户无违约且无未完结的结算单，可申请原路退回租赁押金，请您及时交租!(申请退回押金需要平台审核,请耐心等待,感谢您的理解)</view>

		<view class="operation">
			<!-- <view class="text1">可提现金额(元):</view>
			<text class="money">{{ apiRes && apiRes.withdrawAble }}</text>
			<text class="money2">押金总额：<text class="bold">{{ apiRes && apiRes.totalDeposit }}</text></text> -->
			<view class="tixianCash">
				<text class="text1">可提现金额(元)</text>
				<text class="text2">{{ apiRes && apiRes.withdrawAble }}</text>
			</view>
			<view class="totalCash">
				<text class="text1">押金总额(元)</text>
				<text class="text2">{{apiRes && apiRes.totalDeposit }}</text>
			</view>
		</view>

		<view class="order-wrapper">
			<view v-if="checkHasBillList()">
				<view v-for="(orderObj,index) in apiRes.orderList" class="order-item" :key="index">
					<view class="top">
						下单时间：{{ orderObj.createTime }}
					</view>
					<view class="center">
						<image :src="orderObj.productImgSrc" class="left" />
						<view class="right">
							<view class="c-top">{{ orderObj.productName }}</view>
							<view class="c-center">已支付押金：¥{{ orderObj.paidDeposit }}</view>
							<view class="c-bottom">待支付押金：¥{{ orderObj.unPaidDeposit }}</view>
						</view>
					</view>
					<view v-if="checkShowBottomArea(orderObj)" class="bottom">
						<!--原来的提现按钮 @click="clickSingleOrderTixianBtnHandler(orderObj)"-->
						<view v-if="checkIsSingleOrderShowTixian(orderObj)" @click="newAddtixian(orderObj)"
							class="btn btn1">
							<text v-if="orderObj.status=='PAID'">申请领取</text>
							<text v-if="orderObj.status=='REVIEWED'">待审批</text>
							<text v-if="orderObj.status=='BE_WITHDRAWN'">确认领取</text>
						</view>
						<view v-if="checkIsShowSingleOrderQuZhifu(orderObj)" @click="quzhifuHandler1(orderObj)"
							class="btn btn2">
							去支付
						</view>
					</view>

					<!-- 选择支付方式的时候的弹出框 -->
					<view class="mengceng" v-if="mengcengShow" @click="tab_mengceng"
						@touchmove.stop.prevent="moveHandle"></view>
					<view class="tankuang" v-if="tankuangShow" @touchmove.stop.prevent="moveHandle">
						<view style="margin: 10rpx 0 5rpx 30rpx ;">选择支付方式</view>
						<!-- 支付宝支付，在微信小程序中不显示 -->
						<view v-if="zfbHasPayment">
							<view v-if="!zhifubaoCheckedState">
								<image @click="tab_zhifubao" style="width: 100%;height: 140rpx;"
									src="../../static/shouye-add-rich/zhifubao1-rich.png" mode="aspectFit">
								</image>
							</view>
							<view v-if="zhifubaoCheckedState">
								<image @click="tab_zhifubao" style="width: 100%;height: 140rpx;"
									src="../../static/shouye-add-rich/zhifubao-rich.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<!-- 微信支付 -->
						<view v-if="wxHasPayment">
							<view v-if="!weixinCheckedState">
								<image @click="tab_weixin" style="width: 100%;height: 140rpx;"
									src="../../static/shouye-add-rich/weixin1-rich.png" mode="aspectFit">
								</image>
							</view>
							<view v-if="weixinCheckedState">
								<image @click="tab_weixin" style="width: 100%;height: 140rpx;"
									src="../../static/shouye-add-rich/weixin-rich.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<view class="btn_bottom" @click="btn_comfirm(orderObj)">确定</view>
					</view>
				</view>
			</view>
			<view v-else class="empty-text">暂无需要支付押金的订单</view>
		</view>

		<!-- 弹窗部分 -->
		<view v-if="showDialog" class="dialog-wrapper">
			<view class="mask" />
			<view class="content-wrapper">
				<image @click="closeDialogHandler"
					src="https://zuwuzuwebs.oss-cn-beijing.aliyuncs.com/index/dialogClose1025.png" class="closeImg" />
				<text class="top-text">{{ returnDialogTopText() }}</text>
				<view v-if="checkCanTixian()">
					<text class="contentip1-0">提交后，押金将在1个工作日内原路</text>
					<text class="contentip1-1">退回至您的账户，请注意查收</text>
				</view>
				<view v-else>
					<text class="contentip1">若有疑问，请电话联系客服</text>
					<text class="contentip2">客服工作时间：工作日 10:00-18:00</text>
				</view>
				<view @click="dialogOkHandler" class="submit-btn">{{ returnBtnText() }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tradePay
	} from "../../utils/platform"
	const defaultApiRes = {
		totalDeposit: 0, // 总押金
		withdrawAble: 0, // 可提取的押金
		orderList: [], // 订单列表
	}

	export default {
		data() {
			return {
				zfbHasPayment: false,
				wxHasPayment: false,
				apiRes: defaultApiRes,
				showDialog: false,
				activeOrderObj: {}, // 处于焦点的订单对象
				zhifuFetching: false, // 支付中
				isTixianAll: false, // 是否提现所有
				customerPhone: "", // 平台客服的联系方式

				mengcengShow: false,
				tankuangShow: false,
				zhifubaoCheckedState: false,
				weixinCheckedState: false,
				uniPlatform: '',

				orderIdthird: ''
			}
		},

		onLoad(e) {
			this.uniPlatform = getApp().globalData.uniPlatform
			this.fetchOrderListHandler()
			this.getPaymentList()
			// this.fetchCustomerPhone()
		},
		onShow() {
			this.fetchOrderListHandler()
		},

		/**
		 * 监听页面的下拉刷新操作
		 */
		onPullDownRefresh() {
			this.fetchOrderListHandler(true)
		},

		methods: {
			//动态获取用户的支付方式（hlb-合利宝，zfb-支付宝，wx-微信）
			getPaymentList() {
				this.$request('order/mall/components/getPayChannelList', {
					orderId: this.queryOrderId,
				}, 'get', false).then((res) => {
					if (res.data && res.data.length > 0) {
						this.zfbHasPayment = res.data.some(item => item.type == 'zfb')
						this.wxHasPayment = res.data.some(item => item.type == 'wx')
						// this.hlbHasPayment = res.data.some(item => item.type == 'hlb')
					}
				});
			},
			/**
			 * 加载账单列表数据
			 * @param {Boolean} isRefresh : 是否使用在刷新的场景中
			 */
			fetchOrderListHandler(isRefresh) {
				uni.showLoading({
					title: "加载中"
				})
				this.$request("order/mall/api/order/depositOrderList", {}, "get", true).then(res => {
					const resData = res.data
					this.apiRes = resData || defaultApiRes
					console.log('88888下单后的订单列表', this.apiRes);
				}).finally(() => {
					uni.hideLoading()
					isRefresh && uni.stopPullDownRefresh()
				})
			},

			/**
			 * 加载客服联系方式
			 */
			fetchCustomerPhone() {
				this.$request(`order/hzsx/api/order/getSysConfigByKey?orderId=` + this.activeOrderObj.orderId, {}, "get")
					.then(res => {
						const resData = res.data
						const {
							sysConfigValue
						} = resData
						this.customerPhone = sysConfigValue
					})
			},

			/**
			 * 判断是否有订单列表数据
			 */
			checkHasBillList() {
				return this.apiRes?.orderList?.length
			},

			/**
			 * 判读单个订单是否显示提现按钮
			 * @param {*} oObj : 单个订单对象
			 */
			checkIsSingleOrderShowTixian(oObj) {
				return oObj?.paidDeposit > 0 // 已支付押金大于0才显示
			},

			/**
			 * 判断单个订单是否显示去支付按钮
			 * @param {*} oObj : 单个订单对象
			 */
			checkIsShowSingleOrderQuZhifu(oObj) {
				return oObj?.unPaidDeposit > 0 // 有待支付的押金时才显示该按钮
			},

			/**
			 * 判断是否显示订单模块的底部按钮区域
			 * @param {*} orderObj : 单个订单对象
			 */
			checkShowBottomArea(orderObj) {
				return this.checkIsSingleOrderShowTixian(orderObj) || this.checkIsShowSingleOrderQuZhifu(orderObj)
			},

			/**
			 * 判断是否可进行提现操作，如果是提现单个订单的话，那么得这个订单的状态达到一定条件才能提现；如果是提现所有的话，那么点击了则代表可以提现
			 */
			checkCanTixian() {
				if (this.isTixianAll) { // 表明是提现所有，那么只要点击了提现按钮的话，则表示可以进行提现操作。否则走下面提现当个订单的判断
					return true
				}
				const {
					orderStatus
				} = this.activeOrderObj || {}
				if (!orderStatus) return false // 不存在此字段的话，默认不可进行提现操作
				const hits = ["09", "10"] // 如果订单状态是这些值的话，那么才可提现。https://www.yuque.com/ktbs5p/yft9p7/uau1y2
				return hits.includes(orderStatus)
			},

			/**
			 * 返回按钮文案
			 */
			returnBtnText() {
				return this.checkCanTixian() ? "确认提现" : `客服电话：${this.customerPhone}`
			},

			/**
			 * 关闭弹窗
			 */
			closeDialogHandler() {
				this.activeOrderObj = {}
				this.showDialog = false
				this.isTixianAll = false
			},

			/**
			 * 弹窗点击确定
			 */
			dialogOkHandler() {
				if (this.checkCanTixian()) { // 可提现时，点击按钮是进行提现操作
					const {
						orderId
					} = this.activeOrderObj || {}
					this.tixianHandler(orderId)
				} else { // 不可提现时，点击按钮是拨打电话
					// my.makePhoneCall({
					// 	number: this.customerPhone
					// })
				}
			},


			/**
			 * 点击单个订单的提现按钮时触发
			 */
			clickSingleOrderTixianBtnHandler(oObj) {
				if (!oObj) return
				this.activeOrderObj = oObj
				// this.fetchCustomerPhone()
				this.showDialog = true
			},

			/* 新增的 用户想体现-申请领取-待审批-确认领取 */
			newAddtixian(oObj) {
				//PAID是申请领取  用户点击申请领取  向后台发请求
				const {
					orderId
				} = oObj || {}
				const uid = this.$getUid()
				if (oObj.status == 'PAID') {
					this.$request(`order/mall/orderPayDeposit/startApply?orderId=${orderId}&uid=${uid}`, {}, "get").then(
						res => {
							if (res.businessSuccess || res.success) {
								this.fetchOrderListHandler()
							} else {
								uni.showToast({
									title: res.msg || res.errorMessage,
									icon: 'none'
								});
							}
						}).catch(() => {})
				} else if (oObj.status == 'BE_WITHDRAWN') {
					this.clickSingleOrderTixianBtnHandler(oObj)
				} else if (oObj.status == 'REVIEWED') {
					return
				}
			},

			/**
			 * 返回弹窗的顶部文案
			 */
			returnDialogTopText() {
				if (this.checkCanTixian()) { // 账单可提现时的弹窗顶部文案
					let money = 0
					if (this.isTixianAll) { // 提现所有
						money = this.apiRes?.withdrawAble
					} else {
						const obj = this.activeOrderObj || {}
						money = obj.paidDeposit || 0
					}
					return `即将提现${money}，请确认`
				} else { // 账单不可提现时的弹窗顶部文案
					return "您的订单未完结，暂不能提现"
				}
			},
			//点击蒙层关闭弹窗
			tab_mengceng() {
				this.mengcengShow = false
				this.tankuangShow = false
				//点击关闭蒙层  把两个选择方式都恢复为初始的false状态，不然第二次选择支付会出现问题
				this.zhifubaoCheckedState = false
				this.weixinCheckedState = false
			},
			moveHandle() {},

			/**
			 * 点击支付的时候触发
			 */
			//先触发选择弹出窗和灰色蒙层  选择支付宝支付还是微信支付
			quzhifuHandler1(oObj) {
				this.orderIdthird = oObj.orderId
				this.mengcengShow = true
				this.tankuangShow = true
			},
			//选好支付宝支付或者微信支付后点击确定按钮
			btn_comfirm(oObj) {
				console.log('777777777777', oObj);
				if (!this.zhifubaoCheckedState && !this.weixinCheckedState) {
					return
				}
				if (this.zhifubaoCheckedState) { //走支付宝接口
					console.log('走支付宝支付');
					this.mengcengShow = false
					this.tankuangShow = false
					this.quzhifuHandler(this.orderIdthird)
				} else { //走微信支付其他支付接口
					console.log('走微信支付');
					this.mengcengShow = false
					this.tankuangShow = false
					this.quzhifuHandler(this.orderIdthird)
				}
			},
			tab_zhifubao() {
				this.zhifubaoCheckedState = !this.zhifubaoCheckedState
				this.weixinCheckedState = false
			},
			tab_weixin() {
				this.weixinCheckedState = !this.weixinCheckedState
				this.zhifubaoCheckedState = false
			},

			/**
			 * 支付当个订单的时候触发
			 * @param {*} oObj : 订单对象
			 */
			quzhifuHandler(orderid) {
				if (this.zhifuFetching) return
				this.zhifuFetching = true
				uni.showLoading({
					icon: "none",
					title: "加载中..."
				})
				let that = this;
				if (that.zhifubaoCheckedState) {
					//选择支付宝支付
					that.$request('/order/mall/orderPayDeposit/alipayTradeWapPay', {
							orderId: orderid
						}, 'post')
						.then((res) => {
							if (res.businessSuccess || res.success) {
								if (res.data.payUrl != null) {
									that.orderIdthird = ''
									that.zhifuFetching = false
									that.zhifubaoCheckedState = false
									that.weixinCheckedState = false
									//从服务器获取的订单
									let orderInfo = res.data.payUrl;
									window.location.href = orderInfo;
								}
							} else {
								uni.showToast({
									title: res.msg || res.errorMessage,
									icon: 'none'
								});
							}
						})
						.catch((e) => {
							that.orderIdthird = ''
							that.zhifuFetching = false
							that.zhifubaoCheckedState = false
							that.weixinCheckedState = false
							console.log('支付错误', e);
						})
						.finally(() => {
							that.orderIdthird = ''
							that.zhifuFetching = false
							that.zhifubaoCheckedState = false
							that.weixinCheckedState = false
							console.log('支付结束');
						});
				} else {
					//微信支付
					console.log('走微信支付押金');
					that.$request('/order/mall/orderPayDeposit/wxPayH5', {
							orderId: orderid
						}, 'post')
						.then((res) => {
							if (res.businessSuccess || res.success) {
								if (res.data.payUrl != null) {
									that.orderIdthird = ''
									that.zhifuFetching = false
									that.zhifubaoCheckedState = false
									that.weixinCheckedState = false
									//从服务器获取的订单
									let orderInfo = res.data.h5_url;
									window.location.href = h5_url;
								}
							} else {
								uni.showToast({
									title: res.msg || res.errorMessage,
									icon: 'none'
								});
							}
						})
						.catch((e) => {
							that.orderIdthird = ''
							that.zhifuFetching = false
							that.zhifubaoCheckedState = false
							that.weixinCheckedState = false
							console.log('支付错误', e);
						})
						.finally(() => {
							that.orderIdthird = ''
							that.zhifuFetching = false
							that.zhifubaoCheckedState = false
							that.weixinCheckedState = false
							console.log('支付结束');
						});

				}




				return

				// let that = this;
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						console.log("获取支付方式", res.provider)
						if (~res.provider.indexOf('alipay')) {
							if (that.zhifubaoCheckedState) {
								console.log('====+++++++++++===============----===++++', orderid);
								that.$request("/order/hzsx/orderPayDeposit/getAppPayInfo", {
									orderId: orderid
								}, "GET").then((res) => {
									console.log("支付请求成功", res)
									if (res.data != null && res.data.body != null) {
										//从服务器获取的订单
										var orderInfo = res.data.body;
										uni.requestPayment({
											"provider": "alipay", //固定值为"alipay"
											"orderInfo": orderInfo, //此处为服务器返回的订单信息字符串
											success: function(res) {
												var rawdata = JSON.parse(res.rawdata);
												console.log("支付成功");
												setTimeout(() => {
													uni.hideLoading()
													uni.showToast({
														icon: "none",
														title: "支付成功"
													})
													that.orderIdthird = ''
													that.zhifuFetching = false
													that.fetchOrderListHandler()
													that.zhifubaoCheckedState =
														false
													that.weixinCheckedState = false
												}, 2000) // 增加延时，避免后端接受支付宝回调不及时
											},
											fail: function(err) {
												that.orderIdthird = ''
												that.zhifuFetching = false
												that.zhifubaoCheckedState = false
												that.weixinCheckedState = false
												console.log('支付失败:' + JSON.stringify(err));
											}
										});
									}
								}).catch(e => {
									console.log("支付错误", e)
									that.orderIdthird = ''
									that.zhifubaoCheckedState = false
									that.weixinCheckedState = false
								}).finally(() => {
									that.orderIdthird = ''
									uni.hideLoading();
									failedToast();
									that.zhifuFetching = false
									that.zhifubaoCheckedState = false
									that.weixinCheckedState = false
									console.log("支付结束")

								})
							} else {
								that.zhifubaoCheckedState = false
								that.weixinCheckedState = false
								uni.showToast({
									icon: "none",
									title: "暂不支持app微信支付!"
								})
								that.orderIdthird = ''
								that.zhifuFetching = false

							}

						} else {
							// #ifdef  MP-WEIXIN
							that.$request("order/hzsx/orderPayDeposit/getWxpayInfo", {
								orderId: orderid
							}, "GET").then((res) => {
								console.log('ლ(´ڡ`ლ)(◠‿◠)--押金支付---微信支付', res);
								if (res.data) {
									wx.requestPayment({
										"timeStamp": res.data.timeStamp,
										"nonceStr": res.data.nonceStr,
										"package": res.data.package,
										"signType": "RSA",
										"paySign": res.data.paySign,
										"success": function(res) {
											console.log('支付成功');
											that.orderIdthird = ''
											that.zhifuFetching = false
											that.fetchOrderListHandler()
										},
										"fail": function(res) {
											that.orderIdthird = ''
											console.log('支付失败');
										},
										"complete": function(res) {
											that.orderIdthird = ''
											that.zhifuFetching = false
											that.fetchOrderListHandler()
											console.log('支付完成');
										}
									})
								}
							}).catch(e => {
								that.orderIdthird = ''
								console.log("支付错误", e)
							})
							// #endif
						}
					}
				});
			},

			/**
			 * 进行提现操作时调用，即用于单笔提现，也用于总金额提现
			 * @param {String} orderId : 单笔提现时所传入的订单ID
			 */
			tixianHandler(orderId) {
				console.log('我来体现了-看这个接口是否有uid');
				if (this.tixianing) return
				this.tixianing = true
				let url = "order/mall/orderPayDeposit/withdraw"
				orderId && (url += `?orderId=${orderId}`)
				uni.showLoading({
					title: "提现中"
				})
				this.$request(url, {}, "get", true).then(res => {
					uni.hideLoading()
					this.tixianing = false
					const resData = res.data
					if (resData) {
						this.closeDialogHandler()
						this.fetchOrderListHandler() // 提现成功之后进行数据拉取
						uni.showToast({
							icon: "none",
							title: "提现成功"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				}).catch(() => {
					uni.hideLoading()
					this.tixianing = false
					uni.showToast({
						icon: "none",
						title: "提现失败"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.depositDetailPage-container1033 {
		min-height: 100vh;
		background: #F3F4F4;
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 140rpx;

		.top-tip {
			background: #e6faff;
			border-radius: 20rpx;
			padding: 17rpx 20rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 33rpx;
			margin-bottom: 20rpx;
			letter-spacing: 0.1em;
		}

		.operation {
			width: 710rpx;
			height: 250rpx;
			position: relative;
			background-color: #e6faff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.tixianCash {
				width: 300rpx;
				height: 200rpx;
				background-color: #1677ff;
				margin-right: 20rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;

				.text1 {
					margin-bottom: 20rpx;
					font-weight: 600;
					letter-spacing: 0.05em;
					font-size: 30rpx;
				}

				.text2 {
					font-size: 40rpx;
					font-weight: 600;

				}
			}

			.totalCash {
				width: 300rpx;
				height: 200rpx;
				background-color: #1677ff;
				margin-left: 20rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;

				.text1 {
					font-size: 30rpx;
					margin-bottom: 20rpx;
					font-weight: 600;
					letter-spacing: 0.05em;
				}

				.text2 {
					font-size: 40rpx;
					font-weight: 600;

				}
			}
		}

		.order-wrapper {
			.order-item+.order-item {
				margin-top: 20rpx;
			}

			.order-item {
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 30rpx;

				.top {
					height: 70rpx;
					display: flex;
					align-items: center;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.center {
					padding: 20rpx 0;
					border-top: 1rpx solid #F5F6F6;
					border-bottom: 1rpx solid #F5F6F6;
					display: flex;
					align-items: center;

					.left {
						width: 150rpx;
						height: 150rpx;
						margin-right: 30rpx;
					}

					.right {
						.c-top {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
							margin-bottom: 10rpx;
							line-height: 33rpx;
						}

						.c-center,
						.c-bottom {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 33rpx;
						}

						.c-center {
							margin-bottom: 10rpx;
						}
					}
				}

				.bottom {
					height: 94rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 138rpx;
						height: 56rpx;
						border-radius: 30rpx;
					}

					.btn1 {
						background: #FFFFFF;
						color: #333333;
						border: 1rpx solid #C0C0C0;
					}

					.btn2 {
						background: linear-gradient(90deg, #6fc1ff 0%, #1677ff 100%);
						color: #FFFFFF;
					}

					.btn+.btn {
						margin-left: 20rpx;
					}
				}
			}
		}

		.dialog-wrapper {
			.mask {
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 3;
			}

			.content-wrapper {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 600rpx;
				height: 406rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				z-index: 4;

				.top-text {
					position: absolute;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					top: 87rpx;
					left: 50%;
					transform: translateX(-50%);
					white-space: nowrap;
				}

				.contentip1,
				.contentip2,
				.contentip1-0,
				.contentip1-1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #606370;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					white-space: nowrap;
				}

				.contentip1,
				.contentip1-0 {
					top: 172rpx;
				}

				.contentip2,
				.contentip1-1 {
					top: 210rpx;
				}

				.contentip1-0,
				.contentip1-1 {
					left: 115rpx;
					transform: translateX(0);
				}

				.submit-btn {
					width: 498rpx;
					height: 80rpx;
					background: linear-gradient(90deg, #FD5C5A 0%, #FF2401 100%);
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 39rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.empty-text {
			text-align: center;
			margin-top: 119rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}

		.closeImg {
			width: 21rpx;
			height: 21rpx;
			border: 20rpx solid transparent;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}



		.tankuang {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 150;
			width: 100%;
			height: 600rpx;
			background-color: white;

			.btn_bottom {
				width: 94%;
				letter-spacing: 10rpx;
				height: 80rpx;
				position: absolute;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 10rpx;
				line-height: 80rpx;
				text-align: center;
				color: white;
				background-color: #1777ff;
			}
		}

		.mengceng {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			z-index: 100;
			opacity: 0.5;
			background-color: #999999;
		}
	}
</style>